<template>
  <!-- <el-button type="primary" @click="jumpShow">点击跳转查看</el-button>
    <el-button type="primary" @click="jumpEdit">点击跳转编辑</el-button> -->
  <el-row>
    <!-------------------左侧表单选择----------------------->
    <el-col :span="4">
      <!-- <el-aside width="100%"  style="background-color: rgb(238, 241, 246);height: 700px"> -->
      <switchForm
        :form-data="formData"
        :form_id="form_id"
        :mark="mark"
        @editerOpen="editerOpen"
      />
      <div style="clear: both; padding: 20px 0">
        <div v-for="(item, index) in formFixedOne" :key="index">
          <div
            @click="addForm(item.id)"
            style="
              float: left;
              padding: 4px 4px;
              text-align: center;
              background: #ffffff;
              border: 1px solid #cfcfcf;
              min-width: 40px;
              min-height: 40px;
            "
          >
            <div>
              <img :src="item.icon" alt="" />
            </div>
            <div style="font-size: small">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div style="clear: both; padding: 20px 0"></div>
    </el-col>
    <!----------------中间显示表单------------------->
    <el-col :span="10">
      <el-container style="height: 800px; border: 1px solid #eee">
        <el-main>
          <Form
            :form-data="formData"
            :mark="mark"
            :form_id="form_id"
            @childHandler="childHandler"
            ref="change"
          />
        </el-main>
      </el-container>
    </el-col>
    <!----------单个表单进行修改------------>
    <el-col
      :span="10"
      style="
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        padding: 20px;
        margin-left: 20px;
      "
      class="layout"
    >
      <FormEdit :form-one="formOne" />
    </el-col>
  </el-row>
</template>

<script>
import { getIndex, getForm, getActivityEdit } from "@/api";
import Form from "@/components/public/Form";
import FormEdit from "@/components/public/FormEdit";
import switchForm from "@/components/public/switchForm";
export default {
  name: "activityEdit",
  components: {
    Form,
    FormEdit,
    switchForm,
  },
  data() {
    return {
      formFixedOne: [], //左
      formFixedTwo: [], //左
      formData: [], //中
      formOne: [], //右
      mark: "edit",
      form_id: "",
    };
  },
  created() {
    this.form_id = this.$route.query.id;
    this.getData();
    this.getActivity();
    console.log(this.formData, "formDate");
  },
  methods: {
    getActivity() {
      let params = { form_id: this.form_id };
      getActivityEdit(params)
        .then((res) => {
          console.log(res.data, "编辑数据");
          let data = res.data.data.formUnit;
          let datas = this.formData[0].data;
          let formInfo = res.data.data.formInfo;
          console.log(this.formData[0].data[2].value);
          datas.some((item, index) => {
            console.log(item.value);
            switch (item.name) {
              case "title":
                this.formData[0].data[index].value = formInfo.title;
                break;
              case "banner":
                this.formData[0].data[index].value = formInfo.banner;
                break;
              case "activity_time":
                // this.formData[0].data[index].value[0] = formInfo.start_time;
                // this.formData[0].data[index].value[1] = formInfo.end_time;
                let startArr = formInfo.start_time.split(" ")[1].split(":");
                let startTime =
                  formInfo.start_time.split(" ")[0] +
                  " " +
                  startArr[0] +
                  "-" +
                  startArr[1] +
                  "-" +
                  startArr[2];
                let endArr = formInfo.end_time.split(" ")[1].split(":");
                let endTime =
                  formInfo.end_time.split(" ")[0] +
                  " " +
                  endArr[0] +
                  "-" +
                  endArr[1] +
                  "-" +
                  endArr[2];
                let arr = [];
                arr.push(startTime);
                arr.push(endTime);
                this.formData[0].data[index].value = arr;
                break;
              case "meet_free":
                this.formData[0].data[index].value = formInfo.meet_free;
                break;
              case "description":
                this.formData[0].data[index].value = formInfo.description;
                break;
            }
          });
          console.log(this.formData, "111");
          data.map((item) => {
            switch (item.name) {
              case "is_free":
              case "is_early_bird":
              case "is_stay":
              case "is_invoice":
              case "is_associated_meeting":
              case "signup_num":
                if (item.value != "false" && item.value != false) {
                  this.formData.push(item);
                }
                break;
              default:
                if (item.value != "false" && item.value != false) {
                  item.value = "";
                  this.formData.push(item);
                }
            }
          });
        })
        .catch((error) => console.log(error));
    },
    editerOpen(data) {
      console.log(data, "zujainchaunzhi");
      // this.$nextTick(() => {
      //   this.$refs.change.initEditor();
      // });
    },
    //获取固定的表单结构
    getData() {
      let params = {};
      getIndex(params)
        .then((res) => {
          console.log(res.data, "res");
          let data = res.data.data;
          data.some((item) => {
            if (item.is_commonly == 1) {
              this.formFixedOne.push(item);
            } else {
              this.formFixedTwo.push(item);
            }
            if (res.is_disabled == "true" || res.is_disabled == true) {
              res.is_disabled = true;
            } else {
              res.is_disabled = false;
            }
          });
          // console.log(res.data)
        })
        .catch((error) => console.log(error));
    },
    //添加一条表单
    addForm(id) {
      // console.log(id)
      let params = { id: id };
      getForm(params)
        .then((res) => {
          // console.log(res.data.data)
          res = res.data.data;
          if (res.is_required == "true" || res.is_required == true) {
            res.required = { required: true };
          } else {
            res.required = { required: false };
          }
          if (res.is_disabled == "true" || res.is_disabled == true) {
            res.is_disabled = true;
          } else {
            res.is_disabled = false;
          }
          //如果是单选框
          if (res.type == "radio") {
            let arr = [];
            for (let i = 0; i < res.data.length; i++) {
              arr.push({ name: res.data[i] });
            }
            console.log(arr);
            res.radioData = arr;
            console.log(res);
          }
          this.formData.push(res);
        })
        .catch((error) => console.log(error));
    },
    //接收选中框传来的index索引
    childHandler(index) {
      //接收子组件传来的值
      let formData = this.formData;
      let data = [];
      formData.some((item, indexs) => {
        if (indexs == index) {
          //赋值到单个表单中进行处理
          if (item.is_required == "true" || item.is_required == true) {
            item.is_required = true;
          } else {
            item.is_required = false;
          }
          data = item;
        }
      });

      this.formOne = data;
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
.hello {
  position: relative;
}
.layout {
  position: fixed;
  right: 0;
}
</style>
